﻿<script src="~/Scripts/jquery-easyui-extensions/tree/jeasyui.extensions.tree.dataPlain.js"></script>

<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'源生tree',border:false" style="width:180px;border-right-width:1px;">
        <ul id="treeOriginal"></ul>
    </div>
    <div data-options="region:'center',border:false,title:'数据源'" style="padding:20px;">
        <div style="width:250px;height:180px;border:1px solid red;padding:10px;">
            最简单的数据源格式：
            <pre>
[
    { "id":"1","text":"A" },
    { "id":"2","text":"B" },
    { "id":"3","text":"C" }
]
</pre>
            <a id="btnLoad_1_west" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 west 面板中的 tree（源生）</a>
            <br />
            <br />
            <a id="btnLoad_1_east" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 east 面板中的 tree（扩展）</a>
        </div>
        <br />
        <br />
        <br />
        <div style="width:330px;height:300px;border:1px solid red;padding:10px;">
            带层级的数据源格式：
            <pre>
[
    { "id":"1","text":"A",
        "children":
            [
                { "id": "11", "text": "A1" },
                { "id": "12", "text": "A2" },
                { "id": "13", "text": "A3" }
            ] 
    },
    { "id":"2","text":"B" },
    { "id":"3","text":"C" }
]
</pre>
            <a id="btnLoad_2_west" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 west 面板中的 tree（源生）</a>
            <br />
            <br />
            <a id="btnLoad_2_east" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 east 面板中的 tree（扩展）</a>
        </div>
        <br />
        <br />
        <br />
        <div style="width:330px;height:270px;border:1px solid red;padding:10px;">
            <span style="color:red;font-size:17px;">平滑数据源格式：</span>
            <pre>
[
    { "id":"1","text":"A" },
    { "id": "11", "text": "A1", "parentId": "1" },
    { "id": "12", "text": "A2", "parentId": "1" },
    { "id": "13", "text": "A3", "parentId": "1" },
    { "id":"2","text":"B" },
    { "id":"3","text":"C" }
]
</pre>
            <a id="btnLoad_3_west" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 west 面板中的 tree（源生）</a>
            <br />
            <br />
            <a id="btnLoad_3_east" class="easyui-linkbutton" data-options="iconCls:'icon-add'">加载给 east 面板中的 tree（扩展）</a>
        </div>
    </div>
    <div data-options="region:'east',title:'扩展后的tree',border:false" style="width:180px;border-left-width:1px;">
        <ul id="treeExtension"></ul>
    </div>
</div>

<script>
    $(function () {

        $("#treeOriginal").tree({
            loadFilter: $.fn.tree.extensions._loadFilter
        });

        $("#treeExtension").tree({
            dataPlain: true,
            parentField: "parendId"
        });

        var data1 = [
            { "id": "1", "text": "A" },
            { "id": "2", "text": "B" },
            { "id": "3", "text": "C" }
        ];

        $("#btnLoad_1_west").click(function () {
            $("#treeOriginal").tree("loadData", data1);
        });

        $("#btnLoad_1_east").click(function () {
            $("#treeExtension").tree("loadData", data1);
        });


        var data2 = [
            {
                "id": "1", "text": "A",
                "children":
                    [
                        { "id": "11", "text": "A1" },
                        { "id": "12", "text": "A2" },
                        { "id": "13", "text": "A3" }
                    ]
            },
            { "id": "2", "text": "B" },
            { "id": "3", "text": "C" }
        ];

        $("#btnLoad_2_west").click(function () {
            $("#treeOriginal").tree("loadData", data2);
        });

        $("#btnLoad_2_east").click(function () {
            $("#treeExtension").tree("loadData", data2);
        });



        var data3 = [
            { "id": "1", "text": "A" },
            { "id": "11", "text": "A1", "parendId": 1 },
            { "id": "12", "text": "A2", "parendId": 1 },
            { "id": "13", "text": "A3", "parendId": 1 },
            { "id": "2", "text": "B" },
            { "id": "3", "text": "C" }
        ];


        $("#btnLoad_3_west").click(function () {
            $("#treeOriginal").tree("loadData", data3);
        });

        $("#btnLoad_3_east").click(function () {
            //为不影响data3集合，先克隆data3
            var tempData = $.extend(true, {}, data3), lastData = [];
            for (var c in tempData) {
                if ($.string.isNumeric(String(c))) { lastData.push(tempData[c]); }
            }
            $("#treeExtension").tree("loadData", lastData);

            console.log(data3);
            console.log(lastData);
        });

    });
</script>